<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const toRouter = (type:any) => {
  router.push({path: "/orderMaster", query: {type: type}})
};
const addComment = () => {
router.push({path: "/myComment"})
}
</script>

<template>
  <section class="orderNavUtil">
    <!-- 我的订单 -->
    <div class="item" @click="toRouter(0)"><i class="finish"></i><span>完结订单</span></div>
    <div class="item" @click="toRouter(1)"><i class="doing"></i><span>派送订单</span></div>
    <div class="item" @click="toRouter(2)"><i class="cancel"></i><span>取消订单</span></div>
    <div class="item" @click="toRouter(3)"><i class="all"></i><span>全部订单</span></div>
    <div class="item" @click="addComment()"><i class="start"></i><span>评价</span></div>
  </section>
</template>

<style lang="less" scoped>
.orderNavUtil {
  width: 3.75rem;
  height: .7rem;
  display: flex;
  background: white;
  // margin-bottom: .18rem;
  color: #666;
  font-size: .2rem;
  align-items: center;
  justify-content: center;
  .item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span {
      color: #666;
    font-size: 12px;
    }
    i {
      width: .22rem;
      height: .22rem;
      background-size: contain!important;
      margin-bottom: .1rem;
      &.finish {
        background: url("../../../assets/images/order-icon-1.png") no-repeat center;
      }
      &.doing {
        background: url("../../../assets/images/order-icon-2.png") no-repeat center;
      }
      &.cancel {
        background: url("../../../assets/images/order-icon-3.png") no-repeat center;
      }
      &.all {
        background: url("../../../assets/images/order-icon-4.png") no-repeat center;
      }
      &.start {
         background: url("../../../assets/images/comment-icon-1.png") no-repeat center;
      }
    }
  }
}
</style>

